<template>
  <div class="sys-section-bg profile-bg">
    <div style="height:32px;"></div>
    <div class="page-title">
      <el-icon><i-ep-user /></el-icon>
      <span style="margin-left: 8px; font-size: 24px; font-weight: bold; letter-spacing: 1px; color: #2d3a4b;">个人中心</span>
    </div>
    <el-row justify="center">
      <el-col :span="12">
        <el-card class="profile-card">
          <template #header>
            <span style="font-size: 18px; font-weight: 500;">基本信息</span>
          </template>
          <div class="profile-avatar-box">
            <el-avatar :size="80" style="background: linear-gradient(135deg,#409EFF 60%,#67C23A 100%); font-size:32px;">{{ loginUsername.charAt(0) }}</el-avatar>
          </div>
          <el-descriptions :column="1" border class="profile-desc">
            <el-descriptions-item label="用户名">{{ profileInfo && profileInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ profileInfo && profileInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ profileInfo && profileInfo.phone }}</el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 32px; text-align: right;">
            <el-button type="primary" @click="editProfileDialogVisible = true">修改信息</el-button>
            <el-button style="margin-left: 8px;" @click="ElMessage.info('演示：暂不支持修改密码')">修改密码</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 修改信息弹窗 -->
    <el-dialog title="修改个人信息" v-model="editProfileDialogVisible" width="400px" @close="resetProfileEdit">
      <el-form :model="editProfileForm" :rules="editProfileRules" ref="editProfileFormRef" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="editProfileForm.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editProfileForm.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editProfileForm.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editProfileDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitProfileEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 获取登录用户名
const loginUsername = ref(localStorage.getItem('loginUsername') || '管理员')

// 个人中心数据
const profileInfo = ref({
  name: loginUsername.value,
  email: 'admin@example.com',
  phone: '13800138000'
})

const editProfileDialogVisible = ref(false)
const editProfileForm = ref({
  name: '',
  email: '',
  phone: ''
})
const editProfileFormRef = ref(null)
const editProfileRules = {
  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ]
}

function resetProfileEdit() {
  Object.assign(editProfileForm.value, {
    name: profileInfo.value.name,
    email: profileInfo.value.email,
    phone: profileInfo.value.phone
  })
}

function submitProfileEdit() {
  editProfileFormRef.value.validate(valid => {
    if (!valid) return
    
    // 更新个人信息
    Object.assign(profileInfo.value, editProfileForm.value)
    ElMessage.success('个人信息已更新')
    editProfileDialogVisible.value = false
  })
}

// 组件挂载时获取数据
onMounted(() => {
  // 初始化编辑表单数据
  resetProfileEdit()
  console.log('个人中心组件已加载')
})
</script>

<style scoped>
.sys-section-bg {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.profile-bg {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.page-title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  color: #333;
}

.profile-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-avatar-box {
  text-align: center;
  margin-bottom: 24px;
}

.profile-desc {
  margin-top: 16px;
}
</style> 